import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import storage from '@/commons/storage'
import themes from '@/commons/themes'

export const useSettingsStore = defineStore('settings', () => {
  // State
  const themeColor = ref(storage.get('themeColor') || themes.theme_colors[0]) // 主题的颜色
  const naviColors = ref(storage.get('naviColors') || themes.navi_colors[0]) // 导航栏颜色
  const naviActive = ref(JSON.parse(storage.get('naviActive')) || false) // 导航栏折叠
  const naviLocate = ref(storage.get('naviLocate') || 'top')
  const tabsActive = ref(JSON.parse(storage.get('tabsActive')) || false) // 有无标签栏
  const setsActive = ref(false) // 设置栏折叠

  // Getters (作为计算属性)
  const getThemeColor = computed(() => themeColor.value)
  const getNaviColors = computed(() => naviColors.value)
  const getNaviActive = computed(() => naviActive.value)
  const getNaviLocate = computed(() => naviLocate.value)
  const getTabsActive = computed(() => tabsActive.value)
  const getSetsActive = computed(() => setsActive.value)

  // Actions (修改状态并处理副作用)
  const setThemeColor = (newThemeColor) => {
    themeColor.value = newThemeColor
    storage.set("themeColor", newThemeColor)
  }

  const setNaviColors = (newNaviColors) => {
    naviColors.value = newNaviColors
    storage.set("naviColors", newNaviColors)
  }

  const setNaviActive = (newNaviActive) => {
    naviActive.value = newNaviActive
    storage.set("naviActive", newNaviActive)
  }

  const setNaviLocate = (newNaviLocate) => {
    naviLocate.value = newNaviLocate
    storage.set("naviLocate", newNaviLocate)
  }

  const setTabsActive = (newTabsActive) => {
    tabsActive.value = newTabsActive
    storage.set("tabsActive", newTabsActive)
  }

  const setSetsActive = (newSetsActive) => {
    setsActive.value = newSetsActive
  }

  // 返回state, getters和actions
  return {
    // State
    themeColor,
    naviColors,
    naviActive,
    naviLocate,
    tabsActive,
    setsActive,
    
    // Getters
    getThemeColor,
    getNaviColors,
    getNaviActive,
    getNaviLocate,
    getTabsActive,
    getSetsActive,
    
    // Actions
    setThemeColor,
    setNaviColors,
    setNaviActive,
    setNaviLocate,
    setTabsActive,
    setSetsActive
  }
})